export default {
  data() {
    return {
      node: null,
      graph: null,
      // 是否锁定
      isLock: false,
      // 保持比例
      keepProportions: false,
      // 连接桩
      linkPort: true,
    }
  },
  inject: {
    getNode: { value: "getNode", default: null }, // 侧边栏的组件不需要注入getNode，内部也没有实现导出
    getGraph: { value: "getGraph", default: null },
  },
  mounted() {
    if (this.getNode && this.getGraph) {
      this.node = this.getNode();
      this.graph = this.getGraph();
      // 两个数据源合并同步
      this.nodeData = Object.assign(this.nodeData, this.node.getData());
      this.node.setData({
        ...this.nodeData,
      }); // 重置
      this.node.on("change:data", ({ current }) => { // 监听数据改变事件
        this.dataChange(current);
      });
      let { isDropEnd } = this.nodeData;
      this.node["getNodeData"] = () => this.nodeData;
      // this.init();
      if (isDropEnd) {
        this.init();
        this.node.setData({ isDropEnd: false });
        if (this.nodeData.createNodeDescribe) {
          this.addNodeDescribe(this.node)
        }
      }

    }
  },
  methods: {
    handleMouseDown(e) {
      this.$emit("comMousedown", { e, nodeData: this.nodeData });
    },
    init() {
      this.createPort();
    },
    // 获取组件shape
    getShape() {
      return this.nodeData.shape;
    },
    createPort() {
      // 创建连接桩 ，默认创建四个连接桩
      if (this.linkPort && this.node) {
        this.node.addPorts([
          {
            id: "port1",
            group: "right",
          }, {
            id: "port2",
            group: "left",
          }, {
            id: "port3",
            group: "top",
          }, {
            id: "port4",
            group: "bottom",
          }
        ]);
      }
    },
    addNodeDescribe(node) {
      let text = this.nodeData.text || "";
      let { x, y } = node.position();
      let { width, height } = node.size();
      let position = {
        x: x + width / 2 - width * 0.75,
        y: y + height / 2 + 32,
      }
      let offset = this.nodeData.offset || null;
      if (offset) {
        position.x = position.x + offset.x
        position.y = position.y + offset.y
      }
      const describeNode = this.graph.createNode({
        shape: "text-block",
        ...position,
        width: width * 1.5,
        height: 20,
        attrs: {
          body: {
            fill: "none",
            stroke: "none",
            strokeWidth: 1,
          },
          label: {
            text: text,
            style: {
              fontSize: 16,
              // fontWeight: 600
            }
          }
        },
        data: {
          describe: true,
        },
      });
      node.addChild(describeNode);
    },
    dataChange(current) { // 数据改变
      this.nodeData = Object.assign(this.nodeData, current);
      if (current.text || current.text === "") {
        // 修改描述
        let allChild = this.node.getDescendants()
        allChild.forEach(item => {
          if (item.isNode) {
            try {
              if (item.isNode() && item.getData().describe) {
                // if (current.text === "") { // 删除节点
                //   // item.remove()
                //   return
                // }
                item.attr('label/text', current.text)
              }
            } catch (e) {
              console.log(e)
            }
          }
        })
      }
    }
  },
}